<template>
  <div class="container">
      <div class="navclas" style="margin-top: 5px">
      <a class="" style="border-radius: 4px; width: 68%; padding: 0 10px">
        <div class="van-field__left-icon" style="padding-top: 5px">
          <i
            class="van-icon van-icon-search"
            style="height: 1.1rem; color: #686869"
          ></i>
        </div>
        <input
          v-model="filter_name"
          type="search"
          placeholder="请输入产品名称"
          ref="inpt"
          style="font-size: 14px"
          class="van-field__control"
          @search="init"
        />
      </a>
      <a
        @click="publish"
        style="border-radius: 4px; width: 30%; margin-left: 2%"
        class="is-active"
        ><span style="font-size: 14px">我要发布</span></a
      >
    </div>
    <!-- <van-row type="flex" justify="space-around" align="center">
      <van-col style="width: 70%; border: 1px solid #dddddd; margin-top: 10px">
        <van-search v-model="filter_name" placeholder="请输入查询内容" clearable shape="round" @search="init"></van-search>
      </van-col>
      <van-col>
        <div class="publish" style="margin-top: 10px">
          <span class="background-blue border-color-blue" @click="publish">+发布</span>
        </div>
      </van-col>
    </van-row> -->
    <div>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div v-for="item in list" :key="item.id" :title="item">
          <van-row style="padding-top: 15px" @click="itemClick(item.id)">
            <van-col>
              <img :src="getSrc(item)" style="object-fit: cover" width="100px" height="100px" />
            </van-col>
            <van-col style="
                position: relative;
                height: 100px;
                width: calc(100% - 100px);
                padding-left: 10px;
              ">
              <div>
                <van-cell :title="item.title" label-class="item" title-class="title" :label="item.detail"></van-cell>
              </div>
              <div style="position: absolute; bottom: 0; width: 100%">
                <van-row type="flex" align="bottom">
                  <span style="color: red" :style="
                      item.price == 0 || item.price == null
                        ? 'font-size:12px;'
                        : ''
                    ">{{
                      item.price == 0 || item.price == null
                        ? '面议'
                        : item.price
                    }}{{
                      item.price == 0 || item.price == null
                        ? ''
                        : getChosedUnit(item.unit)
                    }}</span>
                </van-row>
                <van-row type="flex" align="center" justify="space-between" style="height: 16px; margin-left: 1px">
                  <van-col>
                    <span class="cell-span">{{
                      item.areaName || '地区未知'
                    }}</span>
                  </van-col>
                  <van-col style="font-size: 12px" :class="[
                      item.newLevel != null &&
                      item.newLevel != '' &&
                      item.newLevel < 2
                        ? ''
                        : 'active',
                    ]">
                    <div style="height: 100%">
                      <van-icon name="star" color="#EE3F00" style="float: left"></van-icon>
                      <span class="cell-span" style="float: left">{{
                        getChosedLevel(item.newLevel)
                      }}</span>
                    </div>
                  </van-col>
                  <van-col>
                    <span class="cell-span">{{
                      item.updateTime.substring(0, 10)
                    }}</span>
                  </van-col>
                </van-row>
              </div>
            </van-col>
          </van-row>
          <van-divider :style="{
              color: 'rgba(187, 187, 187, 0.38)',
              borderColor: 'rgba(187, 187, 187, 0.38)',
              padding: '15px 16px 0px 16px',
            }"></van-divider>
          <van-row type="flex" justify="space-between" style="height: 36px" align="center">
            <van-col style="padding-left: 10px">
              <span style="font-size: 12px; color: #ee3f00">{{
                item.status==-1 ? '撤销审核':status[item.status]
              }}</span>
            </van-col>
            <van-col>
              <div style="padding-right: 4px">
                <span class="corner-span" @click="updateStatus(item, 'edit')">{{
                  item.status==-1 ? '提交审核': getNameByStatus(item.status, 'edit')
                }}</span>
                <span style="margin-left: 10px" class="corner-span" v-show="item.status == 0 || item.status == 3" @click="updateStatus(item, '')">{{ getNameByStatus(item.status, '') }}</span>
                <span style="margin-left: 10px"></span>
                <span class="corner-span" @click="deleteRent(item.id)">删除</span>
              </div>
            </van-col>
          </van-row>
          <div style="height: 12px; width: 100%; background: #f0f1f4" />
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
  import {
    Search,
    Row,
    Col,
    DropdownMenu,
    DropdownItem,
    List,
    Uploader,
    Popup,
    Area,
    Divider,
  } from 'vant';
  import {
    getLocalStorage
  } from '@/utils/local-storage';
  import {
    listRent,
    updateRentStatus,
    deleteRentRecord,
    dicItems,
  } from '@/api/api';
  import areaList from '@/views/user/module-address-edit/area_all.json';
  import logo_default from '@/assets/images/logo.jpg';
  import scrollFixed from '@/mixin/scroll-fixed';

  export default {
    mixins: [scrollFixed],
    data() {
      return {
        userId: getLocalStorage('userId').userId,
        areaList: areaList,
        address: '全国地区',
        list: [],
        loading: false,
        finished: false,
        logo_default: logo_default,
        page: 0,
        limit: 10,
        sale: false,
        filter_name: '',
        area_code: '',
        in_class: -1,
        chosed_level: -1,
        classoptions: [],
        leveloptions: [],
        unitoptions: [],
        status: ['已下架', '待审核', '审核不通过', '已上线'],
        classId: 'USED.PUBLISH.CLASS',
        newLevelId: 'USED.PUBLISH.NEW.LEVEL',
        unitId: 'RENT.UNIT',
      };
    },

    watch: {
      $route() {
        if (
          this.$route.query.userId != null &&
          this.$route.query.userId != undefined &&
          this.$route.query.userId != ''
        ) {
          this.userId = this.$route.query.userId;
          this.init();
        }
      },
    },

    created() {
      this.initArea();
      this.initClassOption();
      this.initNewLevelOption();
      this.initUnitOption();
      if (
        this.$route.query.userId != null &&
        this.$route.query.userId != undefined &&
        this.$route.query.userId != ''
      ) {
        this.userId = this.$route.query.userId;
      }
    },

    methods: {
      initArea() {
        let area = this.$store.getters.getArea;
        if (area.code != null) {
          //this.area_code = area.code;
          //this.address = area.city;
        }
      },
      //0 下架     1待审核    2审核不通过   3下架
      getNameByStatus(status, type) {
        if (type == 'edit') {
          if (status == 1) {
            //待审核
            return '取消审核';
          } else {
            //审核不通过
            return '编辑';
          }
        } else {
          if (status == 0) {
            //下架
            return '上架';
          } else {
            //已上架
            return '下架';
          }
        }
      },
      getChosedLevel(level_value) {
        for (let i in this.leveloptions) {
          if (level_value == this.leveloptions[i].value) {
            return this.leveloptions[i].text;
          }
        }
      },
      getChosedUnit(unit_value) {
        for (let i in this.unitoptions) {
          if (unit_value == this.unitoptions[i].value) {
            return this.unitoptions[i].text;
          }
        }
      },
      initClassOption() {
        dicItems({
            groupId: this.classId
          })
          .then((res) => {
            let list = res.data.data.list;
            for (let i in list) {
              let opiton = {
                text: list[i].itemName,
                value: parseInt(list[i].itemValue),
              };
              this.classoptions.push(opiton);
            }
          })
          .catch(() => {});
      },
      initNewLevelOption() {
        dicItems({
            groupId: this.newLevelId
          })
          .then((res) => {
            let list = res.data.data.list;
            for (let i in list) {
              let opiton = {
                text: list[i].itemName,
                value: parseInt(list[i].itemValue),
              };
              this.leveloptions.push(opiton);
            }
          })
          .catch(() => {});
      },
      initUnitOption() {
        dicItems({
            groupId: this.unitId
          })
          .then((res) => {
            let list = res.data.data.list;
            for (let i in list) {
              let opiton = {
                text: list[i].itemName,
                value: parseInt(list[i].itemValue),
              };
              this.unitoptions.push(opiton);
            }
          })
          .catch(() => {});
      },
      updateStatus: function (item, type) {
        let message = '';
        let status1 = item.status;
        if (type == 'edit') {
          if (status1 == 1) {
            //待审核
            status1 = -1;
            message = '确定要取消审核吗?';
          }else if (status1 == -1) {
            //提交审核
            status1 = 1;
            message = '确定要提交审核吗?';
          }else {
            //编辑
            this.$router.push(`/info/rent-publish/${item.id}`);
            return;
          }
        } else {
          if (status1 == 0) {
            //下架
            status1 = 1;
            message = '确定要上架吗?';
          } else {
            //上架
            status1 = 0;
            message = '确定要下架吗?';
          }
        }
        this.$dialog
          .confirm({
            message: message,
            cancelButtonText: '再想想',
          })
          .then(() =>
            updateRentStatus({
              id: item.id,
              status: status1
            })
            .then((res) => {
              item.status = status1;
              return this.$dialog.alert({
                message: '更新成功'
              });
            })
            .catch((err) => {
              return this.$dialog.alert({
                message: '更新失败'
              });
            })
          );
      },
      deleteRent: function (id, index) {
        let message = '确定要删除吗?';
        this.$dialog
          .confirm({
            message: message,
            cancelButtonText: '再想想',
          })
          .then(() =>
            deleteRentRecord({
              id: id
            })
            .then((res) => {
              this.list.splice(index, 1);
              return this.$dialog.alert({
                message: '删除成功'
              });
            })
            .catch((err) => {
              //return this.$dialog.alert({ message: '删除失败' });
              this.$dialog.alert({
                message: err.data.errmsg
              });
            })
          );
      },
      publish() {
        this.$router.push('/info/rent-publish/-1');
      },
      itemClick(id) {
        this.$router.push(`/info/rent-detail/${id}`);
      },
      getSrc(item) {
        let image = logo_default;
        if (item != null && item.images != null && item.images.length != 0) {
          image = item.images[0];
        }
        return image;
      },
      addConfirm(e) {
        if (e[0].code == '100000') {
          this.area_code = '';
          this.address = '全国地区';
        } else {
          this.area_code = e[1].code;
          this.address = e[1].name;
        }
        this.show = false;
        this.changeItem();
        this.$refs.area_item.toggle();
      },
      hideAreaItem() {
        this.$refs.area_item.toggle();
      },
      changeItem() {
        this.page = 0;
        this.list = [];
        this.onLoad();
      },
      init() {
        this.page = 0;
        this.list = [];
        this.onLoad();
      },

      onLoad() {
        if (this.userId == -1) {
          this.loading = false;
          this.finished = true;
          return;
        }
        if (this.page != 0 && this.list.length < 10) {
          this.page = 0;
          this.list = [];
        }
        this.page++;
        listRent({
            page: this.page,
            limit: this.limit,
            filtername: this.filter_name,
            areaCode: this.area_code,
            inClass: this.in_class,
            newLevel: this.chosed_level,
            rentId: -1,
            userId: Number(this.userId),
            sort: 'update_time',
          })
          .then((res) => {
            this.list.push(...res.data.data.list);
            this.loading = false;
            this.finished = res.data.data.page >= res.data.data.pages;
          })
          .catch((e) => {
            this.page--;
            this.loading = false;
            this.finished = true;
          });
      },
    },
    components: {
      [Search.name]: Search,
      [Row.name]: Row,
      [Col.name]: Col,
      [List.name]: List,
      [Popup.name]: Popup,
      [Area.name]: Area,
      [Divider.name]: Divider,
      [DropdownMenu.name]: DropdownMenu,
      [DropdownItem.name]: DropdownItem,
    },
  };

</script>

<style lang="scss" scoped>
  /* .van-search{
  background: rgb(255, 255, 255);
    margin-bottom: -10px;
} */
  .van-search__content--round {
    border-radius: 0px !important;
  }
  .van-tag--large {
  font-size: 12px !important;
  padding: 2px 4px !important;
}
  .navclas {
    display: flex;
    height: 50px;
    background-color: white;
    font-weight: bolder;
    padding: 0 15px;
    padding-top: 10px;
    box-sizing: border-box;

    > a {
      border: 1px solid #0397fb;

      // flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .is-active {
      color: white;
      background-color: #0397fb;
    }
  }

  /deep/ .van-picker__cancel,
  /deep/ .van-picker__confirm {
    color: #ee3f00;
  }

  .select_area /deep/ .van-picker__toolbar {
    width: 100%;
    position: absolute;
    bottom: -44px;
  }

  .select_area /deep/ .van-picker__columns {
    margin-bottom: 44px;
  }

  .van-cell>>>.van-field__control[type='search'] {
    height: 30px;
  }

  .corner-span {
    width: 40px;
    height: 20px;
    // background-color: #EE3F00;
    border: 1px solid #ee3f00;
    border-radius: 5px;
    font-size: 12px;
    padding: 2px 8px;
  }

  .active {
    visibility: hidden;
  }

  .spanafter {
    position: relative;
    padding: 0 8px;
    line-height: 18px;
  }

  .spanafter::after {
    position: absolute;
    top: 50%;
    right: -4px;
    margin-top: -5px;
    border: 3px solid;
    border-color: transparent transparent currentColor currentColor;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0.8;
    content: '';
  }

  .address {
    text-align: center;
    height: 36px;
    line-height: 36px;
    color: #323233;
    font-size: 15px;
  }

  .container {
    background-color: white;

    .van-row {
      padding: 0px 16px;

      .van-row {
        padding: 0px;
      }
    }
  }

  .van-divider {
    margin: 0px;
    padding-top: 15px;
  }

  .van-search {
    padding: 0px;
  }

  .title {
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .item {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    -webkit-line-clamp: 1;
    white-space: normal;
    overflow: hidden;
    color: #969799;
    font-size: 12px;
    font-weight: normal;
    margin-top: -4px;
  }

  .publish {
    line-height: 40px;
    width: 54px;
    text-align: end;
  }

  .publish span {
    width: 60px;
    height: 30px;
    background-color: #ee3f00;
    border: 1px solid #ee3f00;
    border-radius: 4px;
    font-size: 13px;
    padding: 5px 6px;
    color: white;
  }

  .van-cell {
    padding: 0px;
  }

  .cell-span {
    color: #969799;
    font-size: 12px;
  }

</style>
